<template>
    <div>
        <mt-header fixed title="爱心书屋">
            <router-link to="/news" slot="right">
               <mt-button >发表</mt-button>
             </router-link>
        </mt-header>


        
        <div class="page-navbar">

            <mt-navbar class="page-part" v-model="select" >
              <mt-tab-item class="mint-tab-item":class="{ 'is-fixed': fixed}" id="1">捐赠资讯</mt-tab-item>
              <mt-tab-item id="2">实体书籍</mt-tab-item>
              
            </mt-navbar>
<br>
        <div class="page-swipe">
            <mt-swipe :auto="4000">
                  <mt-swipe-item class="slide1"></mt-swipe-item>
                  <mt-swipe-item class="slide2"></mt-swipe-item>
                  <mt-swipe-item class="slide3"></mt-swipe-item>
            </mt-swipe>
        </div>

            <mt-tab-container v-model="select">
              <mt-tab-container-item id="1">
                 <div class="xinxi">
                    <ul v-for="(newtext,index) in Newtext" class="information">
                        <li class="neirong">
                           <div class="user_name">{{newtext.user}}</div><br>
                           <div class="user_message">{{newtext.content}}</div><br>
                           <div class="user_gongneng">
                             <button id="zan" class="btn_litter" @click="mtButtonClick1(index)">赞 {{newtext.count_zan}}</button>

                                <button id="pinglun" class="btn_litter" @click="mtButtonClick2(index)">评论</button>
                            
                             <button id="shoucang" class="btn_litter"  @click="mtButtonClick3(index)">收藏  {{newtext.count_collect}}</button>                 
                           </div>
                        </li>
                      </ul>

                      <ul v-for="info in informations" class="information">
                        <li class="neirong">
                           <div class="user_name">{{info.user}}</div><br>
                           <div class="user_message">{{info.content}}
                          </div><br>
                           <div class="user_gongneng">
                             <button id="zan" class="btn_litter">赞</button>
                             <button id="pinglun" class="btn_litter">评论</button>
                             <button id="shoucang" class="btn_litter">收藏</button>
                           </div>
                        </li>                    
                      </ul>
                      <br><br><br><br><br><br><br>
                    
                 </div>
                   
              </mt-tab-container-item>


              <mt-tab-container-item id="2">
                 <div>
                    <router-link to="/donate">
                      <p>捐出书籍</p>
                    </router-link>
                    <router-link to="/need">
                       <p>想要书籍</p>
                    </router-link>
                    <router-view></router-view>
                   <br><br><br><br><br><br>
              </div>
              </mt-tab-container-item>

            </mt-tab-container>
          </div>

    </div>
</template>
<script>

    import { mapGetters } from 'vuex'
    import { mapState } from 'vuex'
    

    import donate from '../components/index/donate.vue'
    import need from '../components/index/need.vue'

    export default {
       name: 'page-navbar',

        data () {
            return {
                title: '主页',
                select: '1',
               
                informations: [{                 
                          content: '做一个有情怀的程序员',
                          user: '高生'                       

                        },{
                          content: '我有一本电子书要捐出',
                          user: '老大哥'
                        },{
                          content: '求一本华软学生手册',
                          user: '罗敷'
                        },{
                          content: '捐村上春树书籍',
                          user: '小凤'
                        }]

            }
        },
        components: {donate,need},
        computed:{
            ...mapState({
                
                 Newtext: state => state.Newtext
            })
        },
        methods:{
            /*...mapMutations([
                'increment' ,// 映射 this.increment() 为 this.$store.commit('increment'
            ]),
            ...mapActions([
                 'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
            ]),
            */
            mtButtonClick1(index){
              this.$store.commit('increment1',index)
            },
            mtButtonClick2(index){
             
              this.$router.push("/pinglun");
            },
             mtButtonClick3(index){
              this.$store.commit('increment2',index)
            }   
        }

    }
</script>
<style>
.mt-tab-item{
  color: #999;
 
}
.mint-swipe {

        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
      }
      .mint-swipe-item {
        line-height:200px;
      }

      .slide1 {
        background:url(../assets/4.4.jpg) no-repeat center;
        color: #fff;
      }

      .slide2 {
        background:url(../assets/2.2.jpg) no-repeat center;
        color: #000;
      }

      .slide3 {
        background:url(../assets/3.3.jpg) no-repeat center;
        color: #fff;
      }
      .information{
        border:3px;
        font-size:15px; 
        border-bottom: 20px solid #f5f5f5;
      }
      .neirong{
        width: 100%;
      }
      .user_name{
        float: left;
        height: 5px;
      }
      .user_gongneng{
        border-top: 1px solid #f1f1f1;
        border-bottom: 1px solid #f1f1f1;
      }
      .btn_litter{
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
        list-style: none;
      }
      #zan{
        width:30%;
        height: 30px;
        background: url(../assets/index/good.png) no-repeat center;
        
      }
      #pinglun{
        width:30%;
        height: 30px;
        background: url(../assets/index/comment1.png) no-repeat center;
       
      }
      #shoucang{
        width:30%;
        height: 30px;
        background: url(../assets/index/collect1.png) no-repeat center;
      }
      .mint-popup-2 {
              width: 100%;
              height: 50px;
              text-align: center;
              background-color: rgba(0,0,0,.7);
              backface-visibility: hidden;
              z-index:3;
      }

      .mint-tab-item{
        color:#2E8B57;

      }
      
      img{
        width: 40px;
        height: 60px;
      }

</style>
